<template>
	<view class="container">
		<!-- 导航栏 -->
		<navView  :title="materialModel.name"></navView>

		<!--主内容部分-->
		<view class="mainContentView">
			<!-- 顶部 -->
			<view class="topView">
				<view
					:class="[materialModel.status === '1' ? 'remainDays topView-warning' : 'remainDays topView-noWarning']">
					当前配料可用 {{materialModel.days}} 天</view>
				<view class="socialResources" @click="toViewResources">社会资源：{{materialModel.societyTotal}} 吨
					<u-icon class="socialResources-toViewBtn" name="arrow-right" color="#FFFFFF" size="23"></u-icon>
				</view>
			</view>

			<!-- 饼状图表部分 -->
			<view class="pieChartPart">
				<view class="pieChartPart-topView">
					<view class="pieChartPart-topView-tr">
						<view class="pieChartPart-topView-price">采购价格：{{materialModel.price}} 元</view>
						<view class="">运&nbsp;&nbsp;&nbsp;费：{{materialModel.price}} 元</view>
					</view>
					<view class="pieChartPart-topView-tr">
						<view class="pieChartPart-topView-title">厂&nbsp;&nbsp;&nbsp;区：</view>
						<view class="pieChartPart-topView-factoryInventory"
							:class="[materialModel.status === '1' ? 'pieChartPart-warning' : 'pieChartPart-noWarning']">
							{{materialModel.factoryInventory}} 吨
						</view>
					</view>
					<view class="pieChartPart-topView-tr">
						<view class="pieChartPart-topView-title">港&nbsp;&nbsp;&nbsp;口：</view>
						<view class="pieChartPart-topView-portInventory">{{materialModel.portInventory}} 吨</view>
					</view>
					<view class="pieChartPart-topView-tr">
						<view class="pieChartPart-topView-title">订&nbsp;&nbsp;&nbsp;单：</view>
						<view class="pieChartPart-topView-forder">共 {{materialModel.forder}} 吨</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="pieChartPart-pieChartView">
					<au-chartPie :chartPieData="chartPieData"></au-chartPie>
				</view>
			</view>

			<!-- 物料明细 -->
			<view class="materialDetailPart">
				<view class="materialDetail-title">物料明细</view>
				<table class="materialDetail-table" cellSpacing="0">
					<tr>
						<th class="materialDetail-table-th">P</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.p}}%</td>
						<th class="materialDetail-table-th">S</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.s}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">As</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.as}}%</td>
						<th class="materialDetail-table-th">Tfe</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.fe}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">SIO2</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.sIO2}}%</td>
						<th class="materialDetail-table-th">CaO</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.caO}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">MgO2</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.mgo}}%</td>
						<th class="materialDetail-table-th">AI2O3</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.aL2O3}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">MnO</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.mnO}}%</td>
						<td class="materialDetail-table-th">TiO2</td>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.tiO2}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">FeO</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.feO}}%</td>
						<th class="materialDetail-table-th">Na2O</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.na2O}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">Pb</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.pb}}%</td>
						<th class="materialDetail-table-th">Pb</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.pb}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">Zn</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.zn}}%</td>
						<th class="materialDetail-table-th">Cu</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.cu}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">烧损</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.sparkler}}%</td>
						<th class="materialDetail-table-th">Cr</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.cr}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">水分含量</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.humidity}}%</td>
						<th class="materialDetail-table-th">粒度&gt;8.0mm</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.particleSize8}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">粒度&lt;0.5mm</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.particleSize5}}%</td>
						<th class="materialDetail-table-th">Ni</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.ni}}%</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">K2O</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.k2O}}%</td>
						<th class="materialDetail-table-th">过筛率(200目筛，干筛)</th>
						<td class="materialDetail-table-td">{{materialModel.ingredientsJson.percentPassing}}%</td>
					</tr>
				</table>
			</view>

			<!-- 物料消耗趋势图 -->
			<view class="consumptionChartPart">
				<view class="materialDetail-title">物料消耗趋势图</view>
				<view class="consumptionChart-chooseTime">
					<chooseTime ref="chooseTimeRef" @curTimeChange="curTimeChange"></chooseTime>
				</view>
				<view class="consumptionChart-part">
					<au-chartLine :chartLineData="chartLineData"></au-chartLine>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import chooseTime from '../components/chooseTime.vue'
	import navView from '../components/navView.vue'
	export default {
		components: {
			chooseTime,
			navView,
		},
		data() {
			return {
				//物料id
				baseMaterialPkid: '',
				//物料详情model
				materialModel: {
					ingredientsJson: {}
				},
				//采购订单量的数据
				chartPieData: {},
				//物料消耗趋势折线图的数据
				chartLineData: {}
			}
		},

		onLoad(option) {
			this.baseMaterialPkid = option.baseMaterialPkid;
			this.requestMaterialInfo();
			// this.requestLineChart();
		},
		methods: {
			//页面返回
			navBack() {
				uni.navigateBack();
			},

			//获取物料详情
			requestMaterialInfo() {
				let baseMaterialPkid = this.baseMaterialPkid;
				this.$u.api.requestMaterialInfo(baseMaterialPkid).then(res => {
					this.materialModel = res;
					let allSupplierData = this.materialModel.allSupplierData;
					// 处理饼图数据
					let pieData = [];
					for (let item of allSupplierData) {
						let descripetion = item.supplier + "：" + item.buycount + '吨';
						let newItem = {
							'value': item.buycount,
							'descripetion': descripetion
						}
						pieData.push(newItem)
					}
					this.chartPieData = {
						pieData: pieData
					}
				}).catch(err => {
					console.error(err)
				})
			},

			//获取物料消耗趋势图
			requestLineChart() {
				this.$nextTick(function() {
					let params = {
						baseMaterialId:	this.baseMaterialPkid,
						dateType: this.$refs.chooseTimeRef.curTimeType, //日期类型：0 月；1 季 ；2 年
						time: this.$refs.chooseTimeRef.selectedTime, //日期：月与季 格式 2021-09；年格式 2021
					}
					this.$u.api.requestLineChart(params).then(res => {
						let data = res
						let dateTimeList = [];
						let lineDataList = [];
						let yAxisDataList = [];
						for (let item of data) {
							dateTimeList.push(item.useupDate);
							lineDataList.push(item.useupValue);
						}
						let groupItemData = {
							color: '#BADEFF',
							data: lineDataList
						}
						yAxisDataList.push(groupItemData);
						this.chartLineData = {
							xAxisDataList: dateTimeList,
							yAxisDataList: yAxisDataList
						}
					}).catch(err => {
						console.error(err)
					})
				})
			},

			//当前时间改变的回调
			curTimeChange() {
				this.requestLineChart();
			},

			//查看社会资源
			toViewResources() {
				let defaultMaterial = [{
					pkid: this.materialModel.materialGroupPkid, //所属物料组的id，如物料1组的id
				}, {
					pkid: this.materialModel.baseMaterialPkid, //物料id，如PB粉的id
					name: this.materialModel.name
				}];
				uni.navigateTo({
					url: 'socialResources?defaultMaterial=' + JSON.stringify(defaultMaterial),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F5F5;
	}

	.mainContentView {
		padding: 30rpx;
	}

	.topView {
		height: 90rpx;
	}

	.remainDays {
		width: 320rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 10rpx;
		float: left;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.topView-noWarning {
		background: linear-gradient(90deg, #4ED19A 0%, #1CBD7A 100%);
	}

	.topView-warning {
		background: #E62E37;
	}

	.socialResources {
		width: 320rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: linear-gradient(90deg, #4EAAE6 0%, #0672BF 100%);
		border-radius: 10rpx;
		float: right;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.socialResources-toViewBtn {
		float: right;
		margin-right: 15rpx;
		margin-top: 33rpx;
	}

	/* 饼状图 */
	.pieChartPart {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 30rpx;
	}

	.pieChartPart-topView {
		height: 200rpx;
		font-size: 22rpx;
		color: #8C8B8B;
	}

	.pieChartPart-topView-tr {
		width: 100%;
		height: 50rpx;
	}

	.pieChartPart-topView-price {
		float: left;
		margin-right: 100rpx;
	}

	.pieChartPart-topView-title {
		float: left;
	}

	.pieChartPart-topView-factoryInventory {
		height: 40rpx;
		border-radius: 10rpx;
		float: left;
		text-align: center;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-top: 5rpx;
		padding: 0rpx 80rpx;
	}

	.pieChartPart-warning {
		background: #DE121C;
	}

	.pieChartPart-noWarning {
		background: #1CBD7A;
	}

	.pieChartPart-topView-portInventory {
		height: 40rpx;
		margin-top: 5rpx;
		border: 1px solid #D2D2D2;
		border-radius: 10rpx;
		float: left;
		text-align: center;
		line-height: 40rpx;
		padding: 0rpx 30rpx;
	}

	.pieChartPart-topView-forder {
		height: 40rpx;
		line-height: 40rpx;
		background: #D2D2D2;
		border-radius: 10rpx;
		float: left;
		margin-top: 5rpx;
		padding: 0rpx 100rpx;
		color: #FFFFFF;
	}

	.line {
		width: 646rpx;
		height: 1rpx;
		background: #F3F3F3;
		margin-top: 10rpx;
	}

	.pieChartPart-pieChartView {
		margin-top: 10rpx;
	}

	/* 物料明细 */
	.materialDetailPart {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 20rpx;
	}

	.materialDetail-title {
		height: 25rpx;
		line-height: 25rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.materialDetail-table {
		font-size: 20rpx;
		text-align: center;
		border-right: 1rpx solid #000000;
		border-bottom: 1rpx solid #000000;
	}

	.materialDetail-table-th {
		background-color: #f2f2f2;
		width: 190rpx;
		height: 48rpx;
		border-left: 1rpx solid #000000;
		border-top: 1rpx solid #000000;
	}

	.materialDetail-table-td {
		width: 135rpx;
		height: 48rpx;
		border-left: 1rpx solid #000000;
		border-top: 1rpx solid #000000;
	}

	/* 物料消耗趋势图 */
	.consumptionChartPart {
		margin-top: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.consumptionChart-chooseTime {
		height: 50rpx;
		margin-top: 10rpx;
	}

	.consumptionChart-part {}
</style>
